import { Tabs } from 'antd';
import { Link } from 'react-router-dom';
import Banner from "@/components/banner";
import ProductCard from "@/components/product-card";
import cloudBg from "@/assets/images/cloudBg-2x.png"
import './index.less'
import Cookies from "js-cookie";
import { bannerData, productsTitle, products, customerData, helpData } from './data'
import { useEffect, useCallback } from "react";
import {
  ReactFlow,
  MiniMap,
  Controls,
  Background,
  useNodesState,
  useEdgesState,
  addEdge,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';

const initialNodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: 'Dooring' } },
  { id: '2', position: { x: 0, y: 100 }, data: { label: 'Flow' } },
  { id: '3', position: { x: 200, y: 100 }, data: { label: 'Nocode/WEP' } },
];

const initialEdges = [{ id: 'e1-2', source: '1', target: '2' },
{ id: 'e1-3', source: '1', target: '3' }];
const Home = () => {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  const onConnect = useCallback((params: any) => setEdges((eds) => addEdge(params, eds)), [setEdges]);


  // const onNodesChange = (value: any) => {
  //   console.log(value);
  // }
  useEffect(() => {

  }, [])
  return (
    <div className="home-wrapper" style={{ width: '100%', height: '90vh' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
      >
        <MiniMap />
        <Controls />
        <Background />
      </ReactFlow>
    </div>
  );
}

export default Home;
